<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="../../../images/jsmile.ico"/>
    <title>用户管理</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_763780_tdovyxg8qq9.css">
    <link rel="stylesheet" href="../../../libs/vue/theme-chalk/elementui.css">
    <link rel="stylesheet" href="../../../css/index.css">
    <script src="../../../libs/vue/vue.js"></script>
    <script src="../../../libs/jquery/jquery.mini.js"></script>
    <script src="../../../libs/vue/elementui.js"></script>
    <script src="../../../libs/layer/layer.js"></script>
    <script src="../../../javascript/kit/jsmile.js"></script>
    <script src="../../../javascript/kit/vue-ext.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-breadcrumb separator="/" style="display: inline-block;">
            <el-breadcrumb-item><a href="#" @click="goHome()">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">系统管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-form :inline="true" :model="searchUser" class="query-form">
        <el-row>
            <el-col :span="3">
                <el-form-item>
                    <el-cascader style="width: 100%;" clearable  placeholder="全部部门"
                                 :options="dicts.depts"
                                 v-model="searchUser.deptId">
                    </el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item>
                    <el-select v-model="searchUser.enable" clearable  placeholder="全部状态" style="width: 100%;">
                        <el-option
                                v-for="item in dicts.status"
                                :key="item.dictValue"
                                :label="item.dictName"
                                :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-date-picker style="width: 100%;"
                                    v-model="searchUser.startEndDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-input placeholder="姓名/账号/电话/邮箱" clearable v-model="searchUser.name" class="input-with-select" style="width: 100%;">
                        <el-button slot="append" icon="el-icon-search" @click="query()"></el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2" >
                <el-button type="primary" @click="addUser">新增账号</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>
        </el-row>
    </el-form>


    <el-table :data="userList" border highlight-current-row size="small" height="calc(100vh - 164px)" style="margin-top:10px;">
        <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
        <el-table-column prop="realName" label="用户姓名" width="100"></el-table-column>
        <el-table-column prop="createTime" label="注册时间"  width="160" sortable></el-table-column>
        <el-table-column prop="deptName" label="部门" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="phone" label="联系电话" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="email" label="邮箱" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="genederName" label="性别"  sortable>
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.geneder === '1' ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.genederName}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="enable" label="状态"   sortable>
            <template slot-scope="scope">
            <el-switch :active-value=1 :inactive-value=0 @change="updateStatus(scope.row,$event)"
                    v-model="scope.row.enable">
            </el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="100"></el-table-column>
        <el-table-column label="操作" width="160">
            <template slot-scope="scope">
                <el-button
                        size="mini" type="success"
                        @click="editUser(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteUser(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchUser.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchUser.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchUser.total">
    </el-pagination>

</div>
<script src="../../../javascript/sys/user/user.js"></script>
</body>
</html>